<template>
    <div>
        <h1>显示</h1>
        姓名:<input type="text" v-model="Cha.Name">
        性别:<input type="text" v-model="Cha.Sex">

        会员等级
        <select v-mdoel="Cha.LeveId">
            <option value="0">请选择</option>
            <option v-for="a in bang" :value="a.LeveId">{{a.LName}}</option>
        </select>
        <input type="button" value="查询" @click="Show">
        <table class="table">
            <thead>
                <tr>
                    <td><input type="checkbox" v-model="qx" @change="sellectidlist"></td>
                    <td>编号</td>
                    <td>名称</td>
                    <td>性别</td>
                    <td>时间</td>
                    <td>年龄</td>
                    <td>图片</td>
                    <td>状态</td>
                    <td>类型</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody v-for="a in data">
                <tr>
                    <td><input type="checkbox" v-model="selelctid" :value="a.Id" ></td>
                    <td>{{a.Id}}</td>
                    <td>{{a.Name}}</td>
                    <td>{{a.Sex}}</td>
                    <td>{{ a.CreateDate }}</td>
                    <td>{{a.Age}}</td>
                    <td><img :src="'https://localhost:7248/'+a.Img" style="width: 100px;height: 100px;"></td>
                    <td>{{a.State?"启用":"禁用"}}</td>
                    <td>{{ a.LName }}</td>
                    <td>
                        <input type="button" value="编辑" @click="Fan(a.Id)">
                        <input type="button" value="逻辑删除" @click="Del(a.Id)">
                    </td>
                </tr>
            </tbody>
        </table>

        <a href="/Add">新增</a>



        <input type="button" value="首页" @click="fy(1)">
        <input type="button" value="上一页" @click="fy(2)">
        <input type="button" value="下一页" @click="fy(3)">
        <input type="button" value="尾页" @click="fy(4)">
        一共{{Page.zys}}页，一共{{Page.zhs}}行，第{{Cha.PageIndex}}页，每页{{Cha.PageSize}}行


        <input type="button" value="批量逻辑删除" @click="Delet">
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { findAncestor } from 'typescript';
onMounted(()=>{
    Show()
    Xia()
})

//下拉框
const bang=ref([{
    "LeveId": 0,
    "LName": ""
}])
const Xia=()=>{
    axios.get('https://localhost:7248/api/Member/Xia').then(res=>{
        bang.value = res.data;
    })
}

const data = ref([{
    "Id": 0,
      "Name": "",
      "Sex": "",
      "CreateDate": "",
      "Age": 0,
      "Img": "string",
      "State": true,
      "LeveId":0,
      "LName": "黄金会员"
}])

const Cha = ref({
    PageIndex:1,
    PageSize:3,
    "State": true,
    "LeveId":0,
    "Name": "",
    "Age": 0,
    "Sex":""

})
const Page=ref({
    zhs:0,
    zys:0
})
const fy =(val:any)=>{
    if(val==1){
        Cha.value.PageIndex=1;
        Show()
    }

    if(val==2){
        if(Cha.value.PageIndex>1){
            Cha.value.PageIndex-=1;
            Show()
        }
    }
    if(val==3){
        if(Cha.value.PageIndex<Page.value.zys){
            Cha.value.PageIndex+=1;
            Show()
        }
    }


    if(val==4){
        Cha.value.PageIndex=Page.value.zys;
        Show()
    }
}



//显示
const Show=()=>{
    axios.get('https://localhost:7248/api/Member/AllGet',{params:Cha.value}).then(res=>{
        data.value = res.data.list
        Page.value.zhs=res.data.count;
        Page.value.zys=Math.ceil(Page.value.zhs/Cha.value.PageSize);
    })
}

var coute = useRoute()
var router =useRouter();
//修改
const Fan=(e:any)=>{
    router.push({path:"/Upd",query:{Id:e}})
}





//逻辑删除

const Del=(e:any)=>{
    if(confirm('确定删除吗？')){
        axios.delete('https://localhost:7248/api/Member/Del',{params:{Id:e}}).then(res=>{
        if(res.data>0){
            alert("删除成功")
            Show();
        }
        else{
            alert('删除失败')
        }
    })
    }
    
}


const qx = ref(false);
const selelctid=ref([0]);





//全选全取消
const sellectidlist=()=>{

    if(qx.value){
        for(var i=0;i<data.value.length;i++){
            selelctid.value.push(data.value[i].Id);
        }
    }
    else{
        //清空选项
        selelctid.value=[]
    }
}



//批量逻辑删除
const Delet=()=>{
    if(selelctid.value.length==0){
        alert('最少选择一行')
        return;
    }




    if(confirm('确定删除？')){
        axios.delete('https://localhost:7248/api/Member/Delete',{params:{Id:selelctid.value.toString()}}).then(res=>{
            if(res.data>0){
                alert('删除成功');
                return;
            }
            else{
                alert('删除失败');
            }
        })
    }
}






</script>